<template>
  <div class="time">
    <div id="charts1" class="containers" style="width: 800px;height: 300px;" data-zoomable data-draggable />
  </div>
</template>

<script setup>
import { onMounted } from 'vue'
import * as echarts from 'echarts'
import customerApi from '@/api/customer/customer'

const option1 = {
  title: {
    text: '客户订单距离天数',
    left: 'center',
    textStyle: {
      color: '#000',
      fontsize: 20
    }
  },
  tooltip: {},
  legend: {
    data: ['最近销售距离天数'],
    left: 'left'
  },
  grid: {
    containLabel: true,
    left: '2%',
    right: '2%',
    top: '14%',
    bottom: '5%'
  },
  xAxis: {
    type: 'category',
    axisLabel: {
      interval: 0
    }
  },
  series: [
    {
      name: '最近销售距离天数',
      type: 'bar',
      data: 'category'
    }
  ],
  yAxis: {
    axisLabel: {
      formatter: '{value} 天'
    }
  }
}

onMounted(async() => {
  showCustomer()
})
// eslint-disable-next-line no-unused-vars
const showCustomer = () => {
  const myCharts = echarts.init(document.getElementById('charts1'))
  myCharts.setOption(option1)
  window.onresize = function() {
    myCharts.resize()
  }
  customerApi.getTimeList().then(res => {
    const customer = res.data
    console.log(customer)
    const customerTime = []
    const customerTimeTotal = []
    for (let i = 0; i < customer.length; i++) {
      console.log(customer[i].name)
      console.log(customer[i].days_since_last_sale
      )
      customerTime.push(customer[i].name)
      customerTimeTotal.push(customer[i].days_since_last_sale
      )
    }
    myCharts.setOption({
      xAxis: {
        data: customerTime
      },
      series: [
        {
          name: '最近销售距离天数',
          type: 'bar',
          data: customerTimeTotal,
          label: {
            show: true, // 显示数据标签
            position: 'top' // 数据标签位置，你可以根据需要调整
          }
        }
      ]
    })
  })
}

</script>

<style scoped lang="scss">
.time{
  margin-top: 10px;
  box-shadow: 1px 5px 10px rgba(0, 0, 0, 0.1);
}
</style>

